<template>
  <div class="login-app" id="divId">
    <el-card class="login-form-layout">
      <div class="left-image">
        <img src="../../assets/imgs/logoleft.png" />
      </div>
      <el-form
        autoComplete="on"
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        label-position="left"
        id="code"
      >
        <div style="text-align: center; margin-bottom: 10px">
          <img
            src="https://static9.meton.vip/10634_1649231792925.png"
            style="height: 67px"
          />
        </div>
        <div
          class="item"
          :class="current === index ? 'on' : ''"
          v-for="(item, index) in navList"
          @click="navTap(index)"
          :key="index"
        >
          {{ item }}
        </div>
        <div v-if="current == 0">
          <el-form-item prop="username" style="margin-top: 20px">
            <el-input
              name="username"
              type="text"
              v-model="loginForm.username"
              autoComplete="on"
              placeholder="请输入用户账号"
              maxlength="11"
              prefix-icon="el-icon-user"
            >
              <!-- <span slot="prefix">
                <i class="iconfont icon-metongerenzhanghu color-main"></i>
              </span> -->
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd" class="pass-mima">
            <el-input
              name="password"
              :type="pwdType"
              @keyup.enter.native="handleLogin"
              v-model="loginForm.pwd"
              autoComplete="on"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"

            >
              <!-- <span slot="prefix">
                <svg-icon icon-class="password" class="color-main"></svg-icon>
              </span> -->
              <span slot="suffix" @click="showPwd" >
                <svg-icon :icon-class="pwdType == 'password' ? 'eye' : 'eye-open'" />
              </span>
              <!-- <span class="show-pwd" @click="showPwd">
              <svg-icon :icon-class="pwdType == 'password' ? 'eye' : 'eye-open'" />
            </span> -->
            </el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item prop="phone" style="margin-top: 20px">
            <el-input
              name="phone"
              type="text"
              v-model="loginForm.phone"
              autoComplete="on"
              placeholder="请输入手机号"
              prefix-icon="el-icon-user"
            >
              <span slot="prefix">
                <i class="iconfont icon-metongerenzhanghu color-main"></i>
              </span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              name="phone"
              type="text"
              v-model="codelogin"
              autoComplete="on"
              placeholder="请输入随机验证码"
              style="width: 50%"
              prefix-icon="el-icon-lock"
            >
              <!-- <span slot="prefix">
                <svg-icon icon-class="password" class="color-main"></svg-icon>
              </span> -->
            </el-input>
            <div id="suiji" oncopy="return false" @click="Refresh(indexcode)">
              <img :src="codedata" alt="" />
            </div>
          </el-form-item>
          <el-form-item prop="verification" style="position: relative">
            <el-input
              name="verification"
              :type="text"
              @keyup.enter.native="handleLogin"
              v-model="loginForm.verification"
              autoComplete="on"
              placeholder="请输入验证码"
              prefix-icon="el-icon-mobile-phone"
            >
              <!-- <span slot="prefix">
                <i class="iconfont icon-metonyanzhengma color-main"></i>
              </span> -->
            </el-input>
            <span v-if="sendAuthCode" class="c-right" @click="getCode"
              >获取验证码</span
            >
            <span v-if="!sendAuthCode" class="c-right c-right2"
              >剩余 <span class="auth_text_blue">{{ auth_time }} </span>s</span
            >
          </el-form-item>
        </div>
        <el-form-item class="form-button">
          <el-button
            style="width: 100%"
            type="primary"
            :loading="loading"
            @click.native.prevent="handleLogin"
            v-if="current == 0"
          >
            登录
          </el-button>
          <el-button
            style="width: 100%"
            type="primary"
            :loading="loading"
            @click.native="yanzheng"
            v-else
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="banben">
      <div style="color: #fff">美咚智慧门店管理系统 V7.0.0</div>
      <div style="width: 480px; margin: 0 auto; padding: 20px 0 0">
        <a
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=61011302001379"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
          ><img src="../../assets/imgs/beian.png" style="float: left" />
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #fff;
            "
          >
            陕公安网备 61011302001379号
          </p></a
        >
        <a
          target="_blank"
          href="https://beian.miit.gov.cn/#/Integrated/index"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
          ><p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
              color: #fff;
            "
          >
            陕ICP备18000426号-2
          </p></a
        >
      </div>
    </div>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import "@/assets/js/canvas-nest.min.js";
import { getLoginPicApi, captchaApi, codeCheckApi,login } from '@/api/user'
import { getStoreStaff } from '@/libs/public'
import { getWXCodeByUrl, loginByWxCode } from "@/libs/wechat";
import { getWechatConfig } from "@/api/wxApi";
import { getToken, removeToken, setToken } from '@/utils/auth'
import Cookies from 'js-cookie'
import Verify from "@/components/verifition/Verify";
export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: "",
        pwd: "",
        phone: "",
        verification: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: '请输入用户账号' },
        ],
        pwd: [
          { required: true, trigger: "blur", message: '请输入账号密码' },
        ],
      },
      loading: false,
      pwdType: "password",
      dialogVisible: false,
      supportDialogVisible: false,
      navList: ["账号登录", "验证码登录"],
      current: 0,
      text: "获取验证码",
      sendAuthCode: true /*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */,
      auth_time: 0 /*倒计时 计数器*/,
      codedata: "",
      codelogin: "",
      indexcode: 1,
      screenWidth:document.documentElement.clientWidth,
    };
  },
  created() {
    // $(window).resize(function () {
    //   var win = $(this).width();
    //   if (win < 1920) { //宽度小于1493时，按1493和窗口实际宽度计算等比
    //     $("login-app").css("zoom", win / 1920);
    //   } else {
    //     $("login-app").css("zoom", "1");
    //   }
    // }).trigger('resize');
    this.getsuiji();
    // this.loginForm.username = getCookie("username");
    // this.loginForm.password = getCookie("password");
    if (
      this.loginForm.username === undefined ||
      this.loginForm.username == null ||
      this.loginForm.username === ""
    ) {
      this.loginForm.username = "";
    }
    if (
      this.loginForm.password === undefined ||
      this.loginForm.password == null
    ) {
      this.loginForm.password = "";
    }
    var _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.handleLogin();
      }
    };
  },
  watch:{
    'screenWidth':function(val){ //监听屏幕宽度变化
                let oIframe = document.getElementById('divId');
                console.log("val1111",val)
                if(Number(val)>=1920){
                  oIframe.style.zoom='1'
                }else{
                  oIframe.style.zoom=Number(val)/1920
                }
                // oIframe.style.width = (Number(val)-120) + 'px'; //'120'是页面布局调整，可去除
            },
  },
  mounted() {
            var _this = this;
            window.onresize = function(){ // 定义窗口大小变更通知事件
                _this.screenWidth = document.documentElement.clientWidth; //窗口宽度
            }
        },
  methods: {
    Refresh() {
      this.getsuiji();
    },
    //随机验证码
    getsuiji() {
      this.indexcode = this.indexcode + 1;
      this.codedata =
        "https://fws.meton.vip/api/auth/code?id=" + this.indexcode;
    },
    //验证码登录
    yanzheng() {
      console.log("this.loginForm", this.loginForm);
      if (!this.loginForm.phone) {
        this.$message({
          message: "请填写手机号码",
          type: "error",
        });
        return;
      }
      if (!this.codelogin) {
        this.$message({
          message: "请输入随机验证码",
          type: "error",
        });
        return;
      }
      if (!this.loginForm.verification) {
        this.$message({
          message: "请输入验证码",
          type: "error",
        });
        return;
      }
      this.loading = true;
      let parmas = {
        account: this.loginForm.phone,
        code: this.loginForm.verification,
      };
      this.$api
        .post("/api/auth/signin/sms", parmas, true)
        .then((res) => {
          this.loading = false;
          // console.log("pppp", res.data);
          sessionStorage.setItem("token", "Bearer " + res.data.results.token);
          let zhanghao = res.data.results.stores;
          sessionStorage.setItem("zhanghao", JSON.stringify(zhanghao));
          sessionStorage.setItem("username", res.data.results.account.username);
          console.log("h5pai", res.data.results.h5)
          sessionStorage.setItem("h5pai", res.data.results.h5);
          sessionStorage.setItem("userInfo", JSON.stringify(res.data.results.account));
          // Cookies.set('userInfo', JSON.stringify(res.data.results.account))
          let gongname = res.data.results.current
            ? res.data.results.current
            : "";
          if (gongname) {
            sessionStorage.setItem("listname", JSON.stringify(gongname));
          }
          this.$router.push({ path: "/" });
        })
        .catch((res) => {
          this.loading = false;
          this.$message({
            message: "网络错误，请稍后重试",
            type: "error",
          });
        });
    },
    getCode() {
      var reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!this.loginForm.phone) {
        this.$message({
          message: "请填写手机号码",
          type: "error",
        });
        return;
      }
      if (!reg_tel.test(this.loginForm.phone)) {
        this.$message({
          message: "请填写正确的手机号码",
          type: "error",
        });
        return;
      }
      if (!this.codelogin) {
        this.$message({
          message: "请输入随机验证码",
          type: "error",
        });
        return;
      }

      let parmas = {
        phone: this.loginForm.phone,
        random: this.codelogin,
      };
      this.$api
        .post("/api/auth/check/random", parmas)
        .then((res) => {
          if (res.data.code == 400) {
            this.$api.post("/api/auth/sms", parmas).then((res) => {
              if (res.data.code == 400) {
                this.sendAuthCode = false;
                this.auth_time = 60;
                var auth_timetimer = setInterval(() => {
                  this.auth_time--;
                  if (this.auth_time <= 0) {
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                  }
                }, 1000);
              }
            });
            // sessionStorage.setItem('token','Bearer '+res.data.token)
            //      this.$router.push({ path: "/" });
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((res) => {
          this.$message({
            message: "网络错误，请稍后重试",
            type: "error",
          });
        });
    },
    navTap: function (index) {
      this.current = index;
    },
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    //账号登录
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          let parmas = {
            account: this.loginForm.username,
            password: this.loginForm.pwd,
          };

      if(!this.loading){
        this.loading=true
        const loading = this.$loading({
        lock: true,
        text: '正在登录中.',
      });
      this.$store.dispatch('user/login', parmas).then((res) => {
        this.loading=false
          this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
          getStoreStaff()
          loading.close();
      }).catch((err) => {
        this.loading=false
        loading.close();
        this.disabled = false;
        if(this.$wechat.isPhone()) this.$dialog.error(err.message);
      })
      }
        }
      });
    },
    handleTry() {
      this.dialogVisible = true;
    },
    dialogConfirm() {
      this.dialogVisible = false;
      setSupport(true);
    },
    dialogCancel() {
      this.dialogVisible = false;
      setSupport(false);
    },
  },
};
</script>
<style lang="scss">
.login-app {
  .el-card
  .el-message {
    border-radius: 10px;
  }
  .el-input__prefix {
    left: 10px;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
   ::v-deepsvg-icon {
      vertical-align: 0.3em;
    }
  }
  .el-input--prefix .el-input__inner {
    padding-left: 35px;
  }
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 99;
  background: url(../../assets/imgs/xiaoloing.jpg) 50%;
  background-size: 100% 100%;
  .login-form-layout {
    position: absolute;
    left: 0;
    right: 0;
    /* width: 360px; */
    width: 1200px;
    margin: 140px auto;
    .el-card__body {
      display: flex;
      padding: 0;
      height: 600px;
    }
    .left-image {
      width: 55%;
      img {
        width: 100%;
        // background-color: #f17872;
        height: 100%;
      }
    }
    #code {
      width: 45%;
      padding: 40px 80px;
    }
  }

  .login-title {
    text-align: center;
  }

  .login-center-layout {
    background: #409eff;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-top: 200px;
  }
  .item {
    width: 50%;
    display: inline-block;
    text-align: center;
    padding: 18px 0;
    margin: 10px 0;
    // background-color: #ccc;
    cursor: pointer;
    border-radius: 0 !important;
    border-bottom: 1px solid #e9e9e9;
    color: #b5b5b5;
  }
  .on {
    // background-color: #409eff;
    // color: #fff;
    color: #fc6076;
    border-bottom: 2px solid #fc6076;
    padding-bottom: 17px;
  }

  #code :nth-child(2) {
    border-radius: 10px 0 0 10px;
  }
  #code :nth-child(3) {
    border-radius: 0 10px 10px 0;
  }
  .c-right {
    padding: 9px;
    background-color: #fc6076;
    color: #fff;
    border-radius: 0 5px 5px 0 !important;
    position: absolute;
    right: 0;
    cursor: pointer;
  }
  .c-right2 {
    cursor: no-drop;
  }
  #suiji {
    display: inline-block;
    width: 90px;
    margin-left: 12%;
    height: 40px;
    border-radius: 5px !important;
    position: absolute;
    cursor: pointer;
  }
  .banben {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
    font-size: 18px;
    color: #ccc;
  }
  .el-form-item {
    margin-bottom: 30px;
  }
  .el-button {
    padding: 20px;
  }
  .el-input__inner {
    height: 55px;
    line-height: 55px;
  }
  .el-input__prefix,
  .el-input__suffix {
    top: 3px;
  }
  .pass-mima{
      .el-input__suffix {
    top: 10px;
  }
  }
  .el-input__suffix {
    right: 20px;
  }
  .el-card {
    border: none;
  }
  .el-card.is-always-shadow,
  .el-card.is-hover-shadow:focus,
  .el-card.is-hover-shadow:hover {
    box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.1);
  }

}
.form-button {
  margin-bottom: 20px;
  text-align: center;

  .el-button:hover {
    border-color: #fc6076 !important;
  }
  .el-button--primary {
    background-color: #fc6076 !important;
    border-color: #fc6076;
  }
}
</style>
